<template>
  <div class="container">
    <Search @handle="handle"></Search>
    <mytable ref="mytable" :config="tableconfig">
      <div slot="mytablebody"></div>
      <!-- 操作 -->
      <template v-slot:operation="{ data }">
        <el-button type="primary" @click="detail(data)">查看</el-button>
        <el-button type="primary" @click="edit(data)">编辑</el-button>
        <el-button type="primary" @click="del(data)">删除</el-button>
      </template>
      <!-- 操作 -->
    </mytable>

    <AddShortMsg ref="AddShortMsg" @save="save"></AddShortMsg>

    <drawer
      ref="drawer"
      :data="selectItem"
      title="短信详情"
      :columns="columns"
    ></drawer>

    <DialogMessage
      :message="message"
      :isShowDialog="isShowDialog"
      @confirm="confirm"
    ></DialogMessage>
  </div>
</template>

<script>
import Search from "./components/Search.vue";
import mytable from "@/components/table/index.vue";
import drawer from "@/components/drawer.vue";
import AddShortMsg from "./components/AddShortMsg.vue";
import DialogMessage from "@/components/DialogMessage.vue";
import { columns, tableconfig } from "./data/configData.js";
import {
  addShortMsg,
  delShortMsg,
  getShortMsgData,
} from "@/api/configuration/shortMessageApi";
import { changeParam } from "@/utils/helper";
export default {
  components: {
    Search,
    mytable,
    drawer,
    AddShortMsg,
    DialogMessage,
  },
  data() {
    return {
      isShowDialog: false,
      message: "删除这条记录？",
      columns,
      tableconfig,
      selectItem: "",
      searchObj: {
        cellPhone: "",
        realName: "",
        pageNo: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    handle(func, data) {
      this[func](data);
    },
    handleSizeChange(val) {
      this.searchObj.pageSize = val;
      this.getShortMsgList();
    },
    handleCurrentChange(value) {
      this.tableconfig.currentpage = value;
      this.searchObj.pageNo = value;
      this.getShortMsgList();
    },
    search(data) {
      this.searchObj.pageNo = 1;
      this.tableconfig.currentpage = 1;
      this.searchObj = { ...this.searchObj, ...data };
      this.getShortMsgList();
    },
    async save(data) {
      const res = await addShortMsg(data);
      if (res && res.success) {
        this.$message.success(res.message);
        await this.getShortMsgList();
      }
      this.$refs.AddShortMsg.close();
    },
    detail(data) {
      this.selectItem = data;
      this.$refs.drawer.open(data);
    },
    add() {
      this.$refs.AddShortMsg.open();
    },
    edit(data) {
      this.$refs.AddShortMsg.open(data);
    },
    del(data) {
      this.isShowDialog = true;
      this.selectItem = data;
    },
    async confirm(type) {
      if (type == 1) {
        const { id } = this.selectItem;
        const res = await delShortMsg({ id });
        if (res && res.success) {
          this.$message.success(res.message);
          if (this.tableconfig.tabledata.length == 1) {
            this.tableconfig.currentpage--;
            this.searchObj.pageNo = this.tableconfig.currentpage;
          }
          await this.getShortMsgList();
        }
      }
      this.isShowDialog = false;
    },
    async getShortMsgList() {
      const res = await getShortMsgData(changeParam({ ...this.searchObj }));
      if (res && res.success) {
        const {
          result: { list, total },
        } = res;
        this.tableconfig.tabledata = list || [];
        this.tableconfig.total = total;
      }
    },
  },
  created() {
    this.search();
  },
};
</script>
<style lang="scss" scoped>
.container {
}
</style>
